<template>
  <view class="content">
    <view class="video-wrapper">
      <video class="video" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4" controls objectFit="fill" :autoplay="false"></video>
    </view>
    <scroll-view class="scroll" scroll-y>
      <view class="scroll-content">
        <view class="introduce-section">
          <text class="title">{{detailData.title}}</text>
          <view class="introduce">
            <text class="introduce">简介简介简介简介简介简介，简介简介简介简介简介简介简介，简介简介简介简介简介简介。</text>
            <text class="yticon icon-xia show-icon"></text>
          </view>
          <view class="actions">
            <view class="action-item">
              <text class="yticon icon-dianzan-ash"></text>
              <text>75</text>
            </view>
            <view class="action-item">
              <text class="yticon icon-dianzan-ash reverse"></text>
              <text>6</text>
            </view>
            <view class="action-item">
              <text class="yticon icon-fenxiang2"></text>
              <text>分享</text>
            </view>
            <view class="action-item">
              <text class="yticon icon-shoucang active"></text>
              <text>收藏</text>
            </view>
          </view>
        </view>
        <view class="container" v-show="loading === false">
          <!-- 推荐 -->
          <view class="s-header">
            <text class="tit">相关推荐</text>
          </view>
          <view class="rec-section" v-for="item in newsList" :key="item.id">
            <view class="rec-item" @click="redirectToDetail">
              <view class="left">
                <text class="title">{{item.title}}</text>
                <view class="bot">
                  <text class="author">{{item.author}}</text>
                  <text class="time">{{item.time}}</text>
                </view>
              </view>
              <view class="right">
                <image class="img" :src="item.images[0]" mode="aspectFill"></image>
                <view class="video-tip">
                  <image class="" src=""></image>
                </view>
              </view>
            </view>
          </view>
          <!-- 评论 -->
          <view class="s-header">
            <text class="tit">网友评论</text>
          </view>
          <view class="evalution">
            <view v-for="(item, index) in evaList" :key="index" class="eva-item">
              <image :src="item.src" mode="aspectFill"></image>
              <view class="eva-right">
                <text>{{item.nickname}}</text>
                <text>{{item.time}}</text>
                <view class="zan-box">
                  <text>{{item.zan}}</text>
                  <text class="yticon icon-shoucang"></text>
                </view>
                <text class="content">{{item.content}}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 加载图标 -->
        <mixLoading class="mix-loading" v-if="loading"></mixLoading>
      </view>
    </scroll-view>
    <view class="bottom">
      <view class="input-box">
        <text class="yticon icon-huifu"></text>
        <input class="input" type="text" placeholder="点评一下把.." placeholder-style="color:#adb1b9;" />
      </view>
      <text class="confirm-btn">提交</text>
    </view>
  </view>
</template>
<script>
import json from '@/json';
import mixLoading from '@/components/mix-loading/mix-loading';
export default {
  components: {
    mixLoading
  },
  data() {
    return {
      loading: true,
      detailData: {},
      newsList: [],
      evaList: [],
    }
  },
  onLoad(options) {
    console.log(options.data);
    this.detailData = JSON.parse(options.data);
    this.loadNewsList();
    this.loadEvaList();
  },
  methods: {
    //获取推荐列表
    async loadNewsList() {
      let list = await json.newsList;
      setTimeout(() => {
        list.sort((a, b) => {
          return Math.random() > .5 ? -1 : 1; //静态数据打乱顺序
        })
        list.forEach(item => {
          if (item.images.length > 0) {
            this.newsList.push(item);
          }
        })
        this.loading = false;
      }, 1000)
    },
    //获取评论列表
    async loadEvaList() {
      this.evaList = await json.evaList;
    },
    redirectToDetail() {
      uni.redirectTo({
        url: 'details'
      })
    }
  }
}
</script>
<style lang="scss">
page {
  height: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.video-wrapper {
  height: 422rpx;

  .video {
    width: 100%;
    height: 100%;
  }
}

.scroll {
  flex: 1;
  position: relative;
  background-color: #f8f8f8;
  height: 0;
}

.scroll-content {
  display: flex;
  flex-direction: column;
}

/* 简介 */
.introduce-section {
  display: flex;
  flex-direction: column;
  padding: 20upx 30rpx;
  background: #fff;
  line-height: 1.5;

  .title {
    font-size: 36rpx;
    color: #303133;
    margin-bottom: 16rpx;
  }

  .introduce {
    display: flex;
    font-size: 26rpx;
    color: #909399;

    .show-icon {
      font-size: 34rpx;
      padding-left: 10rpx;
    }
  }
}

/* 点赞等操作 */
.actions {
  display: flex;
  align-items: center;
  line-height: 1.3;
  padding-right: 44rpx;
  padding-top: 16rpx;

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 60rpx;
    font-size: 24rpx;
    color: #999;
  }

  .yticon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    font-size: 52rpx;

    &.reverse {
      position: relative;
      top: 6rpx;
      transform: scaleY(-1);
    }

    &.active {
      color: #ec706b;
    }
  }

  .icon-fenxiang2 {
    font-weight: bold;
    font-size: 36rpx;
  }

  .icon-shoucang {
    font-size: 44rpx;
  }
}

.mix-loading {
  transform: translateY(140upx);
}

.s-header {
  padding: 20upx 30rpx;
  font-size: 30rpx;
  color: #303133;
  background: #fff;
  margin-top: 16rpx;

  &:before {
    content: '';
    width: 0;
    height: 40rpx;
    margin-right: 24rpx;
    border-left: 6upx solid #ec706b;
  }
}

/* 推荐列表 */
.rec-section {
  background-color: #fff;

  .rec-item {
    display: flex;
    padding: 20upx 30rpx;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      left: 30rpx;
      right: 0;
      bottom: 0;
      height: 0;
      border-bottom: 1px solid #eee;
      transform: scaleY(50%);
    }
  }

  .left {
    flex: 1;
    padding-right: 10rpx;
    overflow: hidden;
    position: relative;

    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 32rpx;
      color: #303133;
      line-height: 44rpx;
    }

    .bot {
      position: absolute;
      left: 0;
      bottom: 4rpx;
      font-size: 26rpx;
      color: #909399;
    }

    .time {
      margin-left: 20rpx;
    }
  }

  .right {
    width: 220rpx;
    height: 140rpx;
    flex-shrink: 0;
    position: relative;

    .img {
      width: 100%;
      height: 100%;
    }

    .video-tip {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .3);

      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}

/* 评论 */
.evalution {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 20upx 0;
}

.eva-item {
  display: flex;
  padding: 20upx 30rpx;
  position: relative;

  image {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50px;
    flex-shrink: 0;
    margin-right: 24rpx;
  }

  &:after {
    content: '';
    position: absolute;
    left: 30rpx;
    bottom: 0;
    right: 0;
    height: 0;
    border-bottom: 1px solid #eee;
    transform: translateY(50%);
  }

  &:last-child:after {
    border: 0;
  }
}

.eva-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 26rpx;
  color: #909399;
  position: relative;

  .zan-box {
    display: flex;
    align-items: base-line;
    position: absolute;
    top: 10rpx;
    right: 10rpx;

    .yticon {
      margin-left: 8rpx;
    }
  }

  .content {
    font-size: 28rpx;
    color: #333;
    padding-top: 20rpx;
  }
}

/* 底部 */
.bottom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 90rpx;
  padding: 0 30rpx;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, .04);
  position: relative;
  z-index: 1;

  .input-box {
    display: flex;
    align-items: center;
    flex: 1;
    height: 60rpx;
    background: #f2f3f3;
    border-radius: 100px;
    padding-left: 30rpx;

    .icon-huifu {
      font-size: 28rpx;
      color: #909399;
    }

    .input {
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #303133;
    }
  }

  .confirm-btn {
    font-size: 30rpx;
    padding-left: 20rpx;
    color: #0d9fff;
  }
}

.input-box {
  padding: 0
}
</style>